<template>
  <dialog_item :dialogTitle="$t('select_superior_dept')" @onBtnDialogClick="onBtnDialogClick" dialogWidth="30%" :visible.sync="detailVisible" :isShowConfirmBtn="true" >
    <department_tree @node-click="onNodeClick" :invalid="invalid"/>
  </dialog_item>
</template>

<script>
import department_tree from "@/components/department_tree.vue";
export default {
  components: {
    department_tree
  },
  props: ["visible","invalid"],
  data() {
    return {
      checkDept:{},
    };
  },
  created(){
  },
  computed: {
    detailVisible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("update:visible", val);
      }
    }
  },

  methods: {
    onNodeClick(dept) {
      this.checkDept=dept;
    },
    onBtnDialogClick(name){
      if(name=='confirm'){
        this.onOk()
      }else if(name=='cancel'){
        this.onCancel()
      }
    },
    onOk(){
      if(this.checkDept=={}){
        this.$message({
          showClose: true,
          message: this.$t("select_department_required"),
          type: "error"
        });
        return false;
      }else{
        this.detailVisible = false;
        this.$emit("select-ok", this.checkDept);
      }

      
    },
    onCancel(){
      this.detailVisible = false;
    },
    handleClose() {
      this.detailVisible = false;
    }
  }
};
</script>

<style lang="scss" scoped>
</style>